<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8"/>
    <title>Metronic | Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <% include ../common/resource-top.ejs %>

    <!-- END HEAD -->

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
<div class="page-wrapper" id="app" v-cloak>
    <!-- BEGIN HEADER -->
    <% include ../common/menu-top.ejs %>

    <div class="page-container">
        <!-- BEGIN SIDEBAR -->

        <% include ../common/menu-left.ejs %>

        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="theme-panel hidden-xs hidden-sm" style="width: 150px;">
                    <input type="submit" class="btn green-sharp btn-outline  sbold upperse" value="add entity"
                           v-on:click="modal_add()">
                </div>

                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li>
                            <a href="index.html">Home</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <span>Dashboard</span>
                        </li>
                    </ul>
                </div>
                <h1 class="page-title"> Dashboard 2
                    <small>dashboard &amp; statistics</small>
                </h1>
                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-cogs"></i>entity list
                        </div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
                            <a href="#portlet-config" data-toggle="modal" class="config" data-original-title=""
                               title=""> </a>
                            <a href="javascript:;" class="reload" data-original-title="" title=""> </a>
                            <a href="javascript:;" class="remove" data-original-title="" title=""> </a>
                        </div>
                    </div>
                    <div class="portlet-body flip-scroll">
                        <div class="row">
                            <div class="col-md-2 col-sm-4">
                                <div id="sample_2_filter" class="dataTables_filter">
                                    <label>PageNo:<input v-model="search.pageNo" type="search" class="form-control input-sm input-small input-inline">
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div id="sample_2_filter" class="dataTables_filter">
                                    <label>DEDKey:<input v-model="search.DEDKey" type="search" class="form-control input-sm input-small input-inline">
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div id="sample_2_filter" class="dataTables_filter">
                                    <a href="javascript:;" class="btn btn-icon-only yellow" v-on:click="entityListGet()">
                                        <i class="fa fa-search"></i>
                                    </a>
                                </div>
                            </div>

                        </div>
                        <div class="table-scrollable">
                        <table class="table table-bordered table-striped table-condensed flip-content">
                            <thead class="flip-content">
                            <tr>
                                <th> DEDkey</th>
                                <th> DEEkey</th>
                                <th> createTime</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in entityList">
                                <td>{{ item.DEDKey }}</td>
                                <td>{{ item.DEEKey }}</td>
                                <td>{{ item.CreateTime }}</td>
                                <td>
                                    <button type="button" class="btn green btn-outline"
                                            v-on:click="modal_update(item)">update
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <a href="javascript:;" class="page-quick-sidebar-toggler">
            <i class="icon-login"></i>
        </a>
    </div>
    <div class="page-footer">
        <div class="page-footer-inner"> 2016 &copy; Metronic Theme By
            <a target="_blank" href="http://keenthemes.com">Keenthemes</a> &nbsp;|&nbsp;
            <a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes"
               title="Purchase Metronic just for 27$ and get lifetime updates for free" target="_blank">Purchase
                Metronic!</a>
        </div>
        <div class="scroll-to-top">
            <i class="icon-arrow-up"></i>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="portlet light ">
                        <div class="portlet-title">
                            <div class="caption font-red-sunglo">
                                <i class="icon-settings font-red-sunglo"></i>
                                <span class="caption-subject bold uppercase"> {{ modal.title }} entity</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="form-body">
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_1"
                                           v-model="modal.entity.name">
                                    <label for="form_control_1">entityName</label>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_2"
                                           v-model="modal.entity.parent">
                                    <label for="form_control_1">parent</label>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_3"
                                           v-model="modal.entity.son">
                                    <label for="form_control_1">son</label>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_4"
                                           v-model="modal.entity.departmentKey">
                                    <label for="form_control_1">departmentKey</label>
                                </div>
                                <div class="form-group form-md-line-input">
                                    <input type="text" class="form-control" id="form_control_5"
                                           v-model="modal.entity.number">
                                    <label for="form_control_1">number</label>
                                </div>
                            </div>

                            <div class="form-actions noborder">
                                <button type="submit" class="btn blue"
                                        v-on:click="modal_update_submit()"
                                        v-if="modal.title == 'Update'">Submit
                                </button>
                                <button type="submit" class="btn blue"
                                        v-on:click="modal_add_submit()" v-else>Submit
                                </button>
                                <button type="button" class="btn default" data-dismiss="modal">cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>
<% include ../common/resource-bottom.ejs %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>


</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            modal: {"title": "", entity: {}},
            entityList: [],
            search: {
                pageNo: 1,
                DEDKey:"1541601732"
            }
        },
        methods: {
            entityListGet: function () {
                const that = this;
                BUIShow()
                this.$http.get("/entity/list", {
                    params: that.search,
                }).then(function (res) {
                    BUIHide()
                    getResponse(res, function (r) {
                        that.entityList = r.list;
                    });
                });
            },
            modal_add: function () {
                this.modal.title = "Add";  // entity有哪些要添加的 lionel
                this.modal.entity = {
                    parent: "",
                    son: "",
                    departmentKey: "",
                    number: ""
                };
                $("#update").modal();
            },

            modal_add_submit: function () {
                var that = this;
                BUIShow()
                that.socket = io.connect('http://localhost:5000/entity/add');
                let condition = {
                    EntityName: that.modal.entity.name,
                    DepartmentKey: that.modal.entity.departmentKey,
                    Number: that.modal.entity.number
                }

                that.socket.emit('addEntity', condition);

                BUIHide()
                $('#update').modal('hide');
                // that.entityListGet();

                that.socket.on("res", function (data) {
                    that.entityListGet();
                    if (data.code === 200) {
                        alert("failed!!")
                    } else if (data.code === 0) {
                        alert("success!!")
                    } else {
                        alert("unkown!!")
                    }


                    // if (data.data !== undefined && data.data !== '' && data.data !== null) {
                    //     for (var i in data.data) {
                    //         data.data[i].cc_did = data.chaincode
                    //     }
                    //     that.dataList = that.dataList.concat(data.data)
                    // }
                    // if (data.isEnd === 1) {
                    //     BUIHide()
                    // }
                    // if(data.error !== undefined && data.error !== ''){
                    //     BUIHide()
                    //     console.log(data)
                    //     alert(data.error)
                    // }
                })
            },


            // modal_add_submit: function () {
            //     const that = this;
            //     BUIShow()
            //     //if(that.modal.parent == null || that.modal.data.son == null)
            //     //{
            //     this.$http.post("/entity/add", {
            //         EntityName: that.modal.entity.name,
            //         DepartmentKey: that.modal.entity.departmentKey,
            //         Number: that.modal.entity.number,
            //         //Number:100,
            //         //Parent: that.modal.entity.parent,
            //         //Son: that.modal.entity.son,
            //     }).then(function (res) {
            //         BUIHide()
            //         getResponse(res,function(r){
            //             /*$(".page-spinner-bar").hide()
            //             getResponse(res, function (r) {
            //                 that.search = {
            //                     city: that.modal.data.city,
            //                     name: that.modal.data.name,
            //                     phone: that.modal.data.phone,
            //                     identify: that.modal.data.identify,
            //                 }*/
            //             console.log("add key list.ejs",res.key);
            //             that.entityListGet();
            //             $('#update').modal('hide');
            //         });
            //     });
            //});
            //}

            // 再封装一个对DE的请求，主要问题在于DEEkey没法生成。 lionel  20180817

            //     this.$http.pose("/de/add", {
            //         DEDKey: that.modal.entity.departmentKey,
            //         DEEKey: "1548887234"
            //     }).then(function (res) {
            //         BUIHide()
            //         getResponse(res,function (rED) {
            //             that.departmentListGet();
            //             $('#update').modal('hide');
            //         })
            //     });
            //
            // },
            modal_update: function (item) {
                this.modal.title = "Update";
                this.modal.entity = item;
                $("#update").modal();
            },
            modal_update_submit: function () {
                const that = this;
                //var i = that.modal.entity.key;
                this.$http.post("/entity/update", {
                    EntityName: that.modal.entity.name,
                    DepartmentKey: that.modal.entity.departmentKey,
                    Number: that.modal.entity.number,
                    //Number: 100,
                    Parent: that.modal.entity.parent,
                    Son: that.modal.entity.son,
                    CreateTime: that.modal.entity.createtime,
                    Key: this.modal.entity.key,  // lione, 20180816，this和that的作用域
                    //Key: "1550705100",
                }).then(function (res) {
                    $(".page-spinner-bar").hide()
                    getResponse(res, function (r) {
                        that.entityListGet();
                        $('#update').modal('hide');
                    });
                });
            },
        },
        created: function () {
            this.entityListGet();
        },
    })


</script>